<template>
  <div>
    <zeda-dialog
      v-model="visible"
      width="600px"
      title="楼层布局详情"
      :before-close="handleClose"
    >
      <Title name="办公区域" :line="false" class="mt20">
        <el-button
          slot="append"
          icon="el-icon-plus"
          size="small"
          type="primary"
          @click="hanldAdd(1)"
        >
          新增
        </el-button>
        <el-table :data="list" border max-height="300">
          <el-table-column prop="roomUnit" label="单元序号"></el-table-column>
          <el-table-column
            prop="roomStartNum"
            label="房间开始编号"
            min-width="100"
          >
          </el-table-column>
          <el-table-column
            prop="roomEndNum"
            label="房间结束编号"
            min-width="100"
          >
          </el-table-column>
          <el-table-column
            prop="remarks"
            label="备注"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="操作" align="center" width="120">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row, 1)"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="small"
                icon="el-icon-delete"
                style="color: red"
                @click="handleDelete(scope.row, 1)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="mt20 remark">
          备注1：房间编号规则： 2位楼层--2位单元号--3位房间编号
        </div>
      </Title>
      <Title name="公共区域" :line="false" class="mt20">
        <el-button
          slot="append"
          icon="el-icon-plus"
          size="small"
          type="primary"
          @click="hanldAdd(2)"
        >
          新增
        </el-button>
        <el-table :data="list2" border max-height="300">
          <el-table-column prop="roomUnit" label="单元序号"></el-table-column>
          <el-table-column
            prop="roomStartNum"
            label="区域开始编号"
            min-width="100"
          >
          </el-table-column>
          <el-table-column
            prop="roomEndNum"
            label="区域结束编号"
            min-width="100"
          >
          </el-table-column>
          <el-table-column
            prop="remarks"
            label="备注"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="操作" align="center" width="120">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row, 2)"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="small"
                icon="el-icon-delete"
                style="color: red"
                @click="handleDelete(scope.row, 2)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="mt20 remark">
          备注2：房间编号规则： 2位楼层--2位功能区编号--3位区域编号
        </div>
      </Title>

      <!-- 添加或编辑岗位对话框 -->
      <el-dialog
        :title="title"
        :visible.sync="show"
        :close-on-click-modal="false"
        width="500px"
        append-to-body
      >
        <el-form
          ref="form"
          :model="model"
          :rules="rules"
          label-width="80px"
          size="small"
        >
          <el-form-item label="单元序号" prop="roomUnit">
            <el-input v-model="model.roomUnit" placeholder="请输入单元序号" />
          </el-form-item>
          <el-form-item label="开始编号" prop="roomStartNum">
            <el-input
              v-model="model.roomStartNum"
              placeholder="请输入开始编号"
            />
          </el-form-item>
          <el-form-item label="结束编号" prop="roomEndNum">
            <el-input v-model="model.roomEndNum" placeholder="请输入结束编号" />
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
            <el-input
              v-model="model.remarks"
              type="textarea"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
      <form-button
        slot="footer"
        cancel-text="关闭"
        :show-submit-button="false"
        @cancel="handleClose"
      ></form-button>
    </zeda-dialog>
  </div>
</template>
  <script>
import {
  getArchitectureRoomList,
  updateArchitectureRoom,
  addArchitectureRoom,
  deleteArchitectureRoom,
} from "@/api/basicdata/construction";
import Title from "@/components/Title";
import FormButton from "@/components/FormButton";
export default {
  components: {
    Title,
    FormButton,
  },
  props: {
    visible: { type: Boolean, default: false },
    id: { type: [String, Number], default: "" },
  },
  data() {
    return {
      show: false,
      type: "",
      title: "",
      list: [],
      list2: [],
      model: {
        roomUnit: "",
        roomStartNum: "",
        roomEndNum: "",
        remarks: "",
      },
      // 表单校验
      rules: {
        roomUnit: [
          { required: true, message: "单元序号不能为空", trigger: "blur" },
        ],
        roomStartNum: [
          { required: true, message: "开始编号不能为空", trigger: "blur" },
        ],
        roomEndNum: [
          { required: true, message: "结束编号不能为空", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    visible(value) {
      if (value && String(this.id).length > 0) {
        this.getList(1);
        this.getList(2);
      }
    },
  },
  methods: {
    getList(type) {
      getArchitectureRoomList({ facilitiesId: this.id, type })
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          if (type === 1) {
            this.list = res.data || [];
          } else if (type === 2) {
            this.list2 = res.data || [];
          }
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!300408");
        });
    },
    hanldAdd(type) {
      this.type = type;
      this.title = type === 1 ? "新增办公区域" : "新增公共区域";
      this.show = true;
    },
    handleUpdate(data, type) {
      this.type = type;
      this.title = type === 1 ? "编辑办公区域" : "编辑公共区域";
      this.model = { ...this.model, ...data };
      this.show = true;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const data = {
            type: this.type,
            facilitiesId: this.id,
            ...this.model,
          };
          if (!data.id) {
            addArchitectureRoom(data)
              .then((res) => {
                if (res.code === 700) {
                  this.$message.warning(res.msg);
                  return false;
                }
                this.$modal.msgSuccess("新增成功");
                this.getList(this.type);
                this.cancel();
              })
              .catch(() => {
                // this.$message.error("系统错误,请联系管理员!300409");
              });
          } else {
            updateArchitectureRoom(data)
              .then((res) => {
                if (res.code === 700) {
                  this.$message.warning(res.msg);
                  return false;
                }
                this.$modal.msgSuccess("编辑成功");
                this.getList(this.type);
                this.cancel();
              })
              .catch(() => {
                // this.$message.error("系统错误,请联系管理员!300410");
              });
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.model = {
        roomUnit: "",
        roomStartNum: "",
        roomEndNum: "",
        remarks: "",
      };
      this.show = false;
    },
    /** 删除按钮操作 */
    handleDelete(row, type) {
      const that = this;
      that.$modal
        .confirm("是否确认删除此数据项？")
        .then(function () {
          deleteArchitectureRoom(row.id)
            .then((res) => {
              if (res.code === 700) {
                that.$message.warning(res.msg);
                return false;
              }
              that.getList(type);
              that.$modal.msgSuccess("删除成功");
            })
            .catch(() => {
              // this.$message.error("系统错误,请联系管理员!300411");
            });
        })
        .catch(() => {});
    },
    handleClose(status) {
      this.$emit("close", typeof status === "boolean" ? status : false);
    },
  },
};
</script>

<style scoped lang="scss">
.remark {
  opacity: 0.6;
}
</style>
